layui.use(['form', 'element', 'layer', 'jquery', 'echarts'], function () {
    var form = layui.form,
        layer = layui.layer,
        element = layui.element,
        echarts = layui.echarts,
        $ = layui.jquery;
    var geoCoordMap = { //这里放你打点的坐标信息，虚拟信息
        '乌鲁木齐市': [87.617733, 43.692818],
        '克拉玛依市': [84.973946, 45.495886],
        '吐鲁番市': [89.184078, 42.947613],
        '昌吉回族自治州': [89.304012, 44.214577],
        '博尔塔拉蒙古自治州': [82.074778, 44.923258],
        '巴音郭楞蒙古自治州': [87.150969, 39.768552],
        '阿克苏地区': [80.265068, 41.170712],
        '克孜勒苏柯尔克孜自治州': [76.172825, 39.713431],
        '喀什地区': [77.589138, 38.467664],
        '和田地区': [79.92533, 37.110687],
        '伊犁哈萨克自治州': [81.317946, 43.92186],
        '塔城地区': [82.985732, 46.746301],
        '阿勒泰地区': [88.13963, 47.848393],
        '哈密市': [93.304012, 43.214577]
    };
    var locValue = [
        {name: "乌鲁木齐市", value: "80"},
        {name: "吐鲁番市", value: "73"},
        {name: "克拉玛依市", value: "72"},
        {name: "昌吉回族自治州", value: "75"},
        {name: "博尔塔拉蒙古自治州", value: "53"},
        {name: "巴音郭楞蒙古自治州", value: "62"},
        {name: "阿克苏地区", value: "53"},
        {name: "克孜勒苏柯尔克孜自治州", value: "22"},
        {name: "喀什地区", value: "32"},
        {name: "和田地区", value: "21"},
        {name: "伊犁哈萨克自治州", value: "33"},
        {name: "塔城地区", value: "6"},
        {name: "阿勒泰地区", value: "12"},
        {name: "哈密市", value: "32"}
    ];
    var convertData = function (geoCoordMap, data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

// JSON
    var chart = null;
    var option = null;

    function load() {
        $.getJSON('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=650000_full', function (data) {
            var option = {
                backgroundColor: '#404a59',
                /* legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['能耗'],
                    textStyle: { color: '#fff' }
                }, */
                visualMap: {
                    min: 0,
                    max: 100,
                    calculable: true,
                    inRange: {
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                //鼠标经过展示数据方法
                tooltip: {
                    triggerOn: "mousemove",
                    formatter: function (params) {
                        if (isNaN(params.value)) {
                            params.value = 0
                        }
                        if (params.componentSubType === 'effectScatter') {
                            params.value = params.data.value[2]
                        }
                        var tipHtml = '<div style="width:200px;height:100px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                            + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                            + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
                            + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                            + '能耗消费比例：' + '<span style="color:#f48225;margin:0 6px;">' + params.value + '</span>' + '%' + '</p>'
                            + '</div>' + '</div>';
                        return tipHtml;
                    },
                    backgroundColor: 'rgba(175,238,238, 0)',
                    // 额外附加的阴影
                    extraCssText: 'box-shadow:0 20px 20px rgba(128, 217, 248, 1)',
                },
                geo: {
                    show: true,
                    map: 'xinjiang',
                    roam: true,
                    aspectScale: 1,
                    label: {
                        emphasis: {
                            show: false,
                            color: "#fff"

                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    },
                },
                series: [
                    {
                        type: 'effectScatter',
                        name: '能耗',
                        zlevel: 10,
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap, locValue).slice(0, 18),
                        symbolSize: 12,
                        rippleEffect: {             //涟漪闪烁效果
                            period: 3,
                            scale: 3,
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: '{b}==11' ? true : false
                            }
                        },
                        steps: 1
                    }
                ],
            };
            echarts.registerMap('xinjiang', data);
            chart = echarts.init(document.getElementById('map2'));
            chart.setOption(option);
            chart.on('click', function (params) {
                console.log(params);
            });
        });

    }

    load();

    function queryLoad() {
        chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: 0
        });
        load();
    }
});